🔥 Firebase はいいぞ ～Firebase Hosting 編～

この記事を読んでできること

Firebase Hosting を利用して静的な Web ページをインターネットに公開する．

コマンドだけですべてが済みます．

ところどころコメントを入れています．

code:コマンドプロンプト

firebase init

You're about to initialize a Firebase project in this directory:

C:\Users\WDAGUtilityAccount\Desktop

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

# 今回は Firebase Hosting だけを指定．(スペースキー)

=== Project Setup

First, let's associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use --add,

but for now we'll just set up a default project.

? Please select an option: Use an existing project

? Select a default Firebase project for this directory: scrapbox-4fadc (scrapbox)

i Using project scrapbox-4fadc (scrapbox)

# さっき作ったプロジェクト名を指定(スペースキー)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public

# public フォルダがインターネットに公開されることになる．

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

+ Wrote public/index.html

i Writing configuration info to firebase.json...

i Writing project information to .firebaserc...

i Writing gitignore file to .gitignore...

+ Firebase initialization complete!

ディレクトリを見て以下のようになっていたらいい感じ

code:Directory

| .firebaserc

| .gitignore

| firebase.json

|

\---public

404.html

index.html

Firebase が勝手に html ファイルを作ってくれているのでこれを公開(デプロイ)したいと思います．

code:コマンドプロンプト

firebase deploy

=== Deploying to 'scrapbox-4fadc'...

i deploying hosting

+ Deploy complete!

公開されました．

URLは {projectname}.web.app か {projectname}.firebaseapp.com が割り当てられます．

今回の場合だと，

です．

アクセスして以下のような画面がでれば完璧です．

https://gyazo.com/9a6d735c2d21ed97fda7e76736f1b10d

public 下を更新する，firebase deploy，で更新できます．